<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
		<meta http-equiv="Content-Type" content="text/html; charset=GBK">
		<meta name="author" content="m.jd.com">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<meta http-equiv="Expires" content="-1">
		<meta http-equiv="Cache-Control" content="no-cache">
		<meta http-equiv="Pragma" content="no-cache">
		<meta name="full-screen" content="yes">
		<meta name="browsermode" content="application">
		<meta name="x5-fullscreen" content="true">
		<meta name="x5-page-mode" content="app">
		<title>加减乘除计算</title>
		<style>
			.box {
				border: 2px solid rgb(98, 105, 147);
				width: 550px;
				text-align: center;
				margin: 20px;
				font-size: 18px;
				color: rgb(98, 105, 147);
				border-radius: 16px;
			}
			
			h2 {
				color: rgb(98, 105, 147);
				text-align: center;
				font-size: 20px;
				font-weight: 600;
				font-family: "宋体";
			}
			
			input[type=text] {
				width: 100px;
				height: 20px;
				background: rgb(164, 168, 193);
				margin: 0 10px;
				color: white;
				border-radius: 4px;
			}
			
			input[type=button] {
				background: rgb(98, 105, 147);
				color: white;
				border: rgb(181, 185, 206);
				text-align: center;
				vertical-align: middle;
				border-radius: 4px;
			}
			
			input[type=button]:hover {
				background: rgb(180, 180, 218);
				color: rgb(98, 105, 147);
				border: rgb(181, 185, 206);
				transform: scale(1.1);
				transition: all 0.2s ease-in;
			}
			
			input[type=reset] {
				background: rgb(98, 105, 147);
				color: white;
				border: rgb(181, 185, 206);
				text-align: center;
				vertical-align: middle;
				border-radius: 4px;
			}
			
			input[type=reset]:hover {
				background: rgb(180, 180, 218);
				color: rgb(98, 105, 147);
				border: rgb(181, 185, 206);
				transform: scale(1.1);
				transition: all 0.2s ease-in;
			}
		</style>
	</head>

	<body>
		<div class="box plus">
			<form>
				<h2>加法计算：</h2>
				<p>
					<input type="text" id="num1" />+<input type="text" id="num2" />
					<input type="button" value="=" onclick="javascript:num3.value=parseInt(num1.value)+parseInt(num2.value)" />
					<input type="text" id="num3" />
					<input type="reset" value="清零" />
				</p>
			</form>
		</div>

		<div class="box minus">
			<form>
				<h2>减法计算：</h2>
				<p>
					<input type="text" id="num1" />-<input type="text" id="num2" />
					<input type="button" value="=" onclick="javascript:num3.value=parseInt(num1.value)-parseInt(num2.value)" />
					<input type="text" id="num3" />
					<input type="reset" value="清零" />
				</p>
			</form>
		</div>

		<div class="box cheng">
			<form>
				<h2>乘法计算：</h2>
				<p>
					<input type="text" id="num1" />*<input type="text" id="num2" />
					<input type="button" value="=" onclick="javascript:num3.value=parseInt(num1.value)*parseInt(num2.value)" />
					<input type="text" id="num3" />
					<input type="reset" value="清零" />
				</p>
			</form>
		</div>
		<div class="box chu">
			<form>
				<h2>除法计算：</h2>
				<p>
					<input type="text" id="num1" />*<input type="text" id="num2" />
					<input type="button" value="=" onclick="javascript:num3.value=parseInt(num1.value)/parseInt(num2.value)" />
					<input type="text" id="num3" />
					<input type="reset" value="清零" />
				</p>
			</form>
		</div>
		<div class="box qiuyu">
			<form>
				<h2>求余计算：</h2>
				<p>
					<input type="text" id="num1" />%<input type="text" id="num2" />
					<input type="button" value="=" onclick="javascript:num3.value=parseInt(num1.value)%parseInt(num2.value)" />
					<input type="text" id="num3" />
					<input type="reset" value="清零" />
				</p>
			</form>
		</div>
	</body>

</html>